.f {
  position: relative;
  margin: 300px;
}
.f .s {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: -100% center;
  border-radius: 100%;
  mix-blend-mode: darken;
}
.f .s:nth-child(1) {
  background-color: hsl(240deg, 8%, 50%);
  transform: translate(100px) scale(0.08) rotate(50deg);
}
.f .s:nth-child(2) {
  background-color: hsl(240deg, 16%, 50%);
  transform: translate(100px) scale(0.16) rotate(100deg);
}
.f .s:nth-child(3) {
  background-color: hsl(240deg, 24%, 50%);
  transform: translate(100px) scale(0.24) rotate(150deg);
}
.f .s:nth-child(4) {
  background-color: hsl(240deg, 32%, 50%);
  transform: translate(100px) scale(0.32) rotate(200deg);
}
.f .s:nth-child(5) {
  background-color: hsl(240deg, 40%, 50%);
  transform: translate(100px) scale(0.4) rotate(250deg);
}
.f .s:nth-child(6) {
  background-color: hsl(240deg, 48%, 50%);
  transform: translate(100px) scale(0.48) rotate(300deg);
}
.f .s:nth-child(7) {
  background-color: hsl(240deg, 56%, 50%);
  transform: translate(100px) scale(0.56) rotate(350deg);
}
.f .s:nth-child(8) {
  background-color: hsl(240deg, 64%, 50%);
  transform: translate(100px) scale(0.64) rotate(400deg);
}
.f .s:nth-child(9) {
  background-color: hsl(240deg, 72%, 50%);
  transform: translate(100px) scale(0.72) rotate(450deg);
}
.f .s:nth-child(10) {
  background-color: hsl(240deg, 80%, 50%);
  transform: translate(100px) scale(0.8) rotate(500deg);
}
.f .s:nth-child(11) {
  background-color: hsl(240deg, 88%, 50%);
  transform: translate(100px) scale(0.88) rotate(550deg);
}
.f .s:nth-child(12) {
  background-color: hsl(240deg, 96%, 50%);
  transform: translate(100px) scale(0.96) rotate(600deg);
}/*# sourceMappingURL=30_20220228220242.css.map */